<template>
  <el-container>
    <el-header class="header">
      <el-menu
        :default-active="active"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        router
        active-text-color="#ffd04b">
        <el-menu-item index="home">
          <i class="el-icon-menu"></i>
          <span slot="title">关系图1</span>
        </el-menu-item>
        <el-menu-item index="about">
          <i class="el-icon-document"></i>
          <span slot="title">关系图2</span>
        </el-menu-item>
      </el-menu>
    </el-header>
    <el-main>
        <div id="echartGraph" style="width: 100%;height: 800px"></div>
    </el-main>
  </el-container>
</template>

<script>
import $ from 'jquery'

const dataTool = require('echarts/extension/dataTool')

export default {
  name: 'home',
  components: {},
  data() {
    return {
      active: 'home',
      myChart: null,
    };
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const myChart = this.$echarts.init(document.getElementById('echartGraph'));
      myChart.dataTool = dataTool
      myChart.showLoading();
      $.get('https://cdn.jsdelivr.net/gh/apache/incubator-echarts-website@asf-site/examples/data/asset/data/les-miserables.gexf', (xml) => {
        myChart.hideLoading();
        const graph = myChart.dataTool.gexf.parse(xml);
        const categories = [];
        for (let i = 0; i < 9; i++) {
          categories[i] = {
            name: `类目${i}`,
          };
        }
        graph.nodes.forEach((node) => {
          node.itemStyle = null;
          node.value = node.symbolSize;
          node.symbolSize /= 1.5;
          node.label = {
            show: node.symbolSize > 30,
          };
          node.category = node.attributes.modularity_class;
        });
        const option = {
          title: {
            text: 'Les Miserables',
            subtext: 'Default layout',
            top: 'bottom',
            left: 'right',
          },
          tooltip: {},
          legend: [{
            // selectedMode: 'single',
            data: categories.map(a => a.name),
          }],
          animationDuration: 1500,
          animationEasingUpdate: 'quinticInOut',
          series: [
            {
              name: 'Les Miserables',
              type: 'graph',
              layout: 'none',
              data: graph.nodes,
              links: graph.links,
              categories,
              roam: true,
              focusNodeAdjacency: true,
              itemStyle: {
                borderColor: '#fff',
                borderWidth: 1,
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.3)',
              },
              label: {
                position: 'right',
                formatter: '{b}',
              },
              lineStyle: {
                color: 'source',
                curveness: 0.3,
              },
              emphasis: {
                lineStyle: {
                  width: 10,
                },
              },
            },
          ],
        };
        myChart.setOption(option);
      }, 'xml')
    },
    handleSelect() {},
  },
};
</script>
<style lang="scss" scoped>
$--color-primary: #FFC340;
.header {
  padding: 0;
  background-color: $--color-primary;
}
.image {
  width: 220px;
  height: 110px;
}
.image-slot {
  height: 110px;
  line-height: 110px;
}
</style>
